<template>
  <div class="main">
    <div class="card">
      <div class="title">
        <span>我的信息</span>
      </div>
      <div class="line"></div>
      <div class="content">
        <div class="avatar">
          <img src="ava1.png" />
        </div>
        <div class="info">
          <div>姓名：{{ store.state.username }}</div>
          <div>身份：{{ userType() }}</div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="title">
        <span>学生数量</span>
        <span class="more" @click="router.push({ name: 'student' })">点击查看<ChevronRightIcon /></span>
      </div>
      <div class="line"></div>
      <div class="content">
        <div ref="studentChart" style="width: 100%; height: 250px;"></div>
      </div>
    </div>
    <div class="card">
      <div class="title">
        <span>教师数量</span>
        <span class="more" @click="router.push({ name: 'teacher' })">点击查看<ChevronRightIcon /></span>
      </div>
      <div class="line"></div>
      <div class="content">
        <div ref="teacherChart" style="width: 100%; height: 250px;"></div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="card">
      <div class="title">
        <span>待我审批</span>
        <span class="more">更多<ChevronRightIcon /></span>
      </div>
      <div class="line"></div>
      <div class="content">
        <div class="tips" v-for="i in 6">
          <div class="circle"></div>
          <div class="app">请假申请</div>
          <div class="people">申请人：bowlcake</div>
          <div class="time">申请时间：2022-8-8</div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="title">
        <span>动态消息</span>
        <span class="more">更多<ChevronRightIcon /></span>
      </div>
      <div class="line"></div>
      <div class="content">
        <div class="tips" v-for="i in 6">
          <div class="circle"></div>
          <div class="message">关于2022秋季学期安排</div>
          <div class="time">2022-8-8</div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="title">
        <span>用户数量</span>
        <span class="more" @click="router.push({ name: 'user' })">点击查看<ChevronRightIcon /></span>
        <div class="line"></div>
      </div>
      <div class="content">
        <div ref="userChart" style="width: 100%; height: 250px;"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ChevronRightIcon } from 'tdesign-icons-vue-next'
import * as echarts from 'echarts';
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {studentNum} from "../../api/Student";
import {useStore} from "vuex";
const router = useRouter();
const myCharts = ref<any>();
const studentTotal = ref();
const teacherTotal = ref();
const userTotal = ref();
const studentChart = ref<HTMLElement>();
const store = useStore();
function studentInit() {
  // 绘制图表
  myCharts.value = echarts.init(studentChart.value!);
  myCharts.value.setOption({
    title: {
      text: `学生总人数：${ studentTotal.value.studentCommon + studentTotal.value.studentCommon1 + studentTotal.value.studentCommon2 + studentTotal.value.studentCommon3 }`,
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
      }
    },
    color: ["#176eff", "#f7d065", "#f371c5", "#f60c0c"],
    tooltip: {},
    series: [{
      type: 'pie',
      data: [
        {
          value: studentTotal.value.studentCommon,
          name: '普通学生',
        },
        {
          value: studentTotal.value.studentCommon1,
          name: '学科委员',
        },
        {
          value: studentTotal.value.studentCommon2,
          name: '副班长',
        },
        {
          value: studentTotal.value.studentCommon3,
          name: '班长',
        },
      ],
      labelLine: {
        show: true
      },
      radius: ['50%', '80%']
    }],
  });
}
const teacherChart = ref<HTMLElement>();
function teacherInit() {
  // 绘制图表
  myCharts.value = echarts.init(teacherChart.value!);
  myCharts.value.setOption({
    title: {
      text: `教师总人数：${ teacherTotal.value.teacherCommon + teacherTotal.value.teacherCommon1 }`,
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
      }
    },
    color: ["#e000e8", "#6d82fa"],
    tooltip: {},
    series: [{
      type: 'pie',
      data: [
        {
          value: teacherTotal.value.teacherCommon,
          name: '普通教师',
        },
        {
          value: teacherTotal.value.teacherCommon1,
          name: '学科主任',
        },
      ],
      labelLine: {
        show: true
      },
      radius: ['50%', '80%']
    }],
  });
}
const userChart = ref<HTMLElement>();
function userInit() {
  // 绘制图表
  myCharts.value = echarts.init(userChart.value!);
  myCharts.value.setOption({
    title: {
      text: `用户总数：${ userTotal.value.userCommon + userTotal.value.userCommon1 + userTotal.value.userCommon2 + userTotal.value.userCommon3 }`,
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
      }
    },
    color: ["#05f8a3", "#0280e7", "#d90355", "#ff0000"],
    tooltip: {},
    series: [{
      type: 'pie',
      data: [
        {
          value: userTotal.value.userCommon,
          name: '学生',
        },
        {
          value: userTotal.value.userCommon1,
          name: '教师',
        },
        {
          value: userTotal.value.userCommon2,
          name: '领导',
        },
        {
          value: userTotal.value.userCommon3,
          name: '管理员',
        },
      ],
      labelLine: {
        show: true
      },
      radius: ['50%', '80%']
    }],
  });
}

function userType():string {
  if (store.state.userType === '0') {
    return '学生';
  } else if(store.state.userType === '1') {
    return '教师';
  } else if(store.state.userType === '2') {
    return '领导';
  } else if(store.state.userType === '3') {
    return '管理员';
  }
  return '';
}

async function checkStudentNum() {
  const result = await studentNum();
  if (result) {
    studentTotal.value = result.data[0];
    teacherTotal.value = result.data[1];
    userTotal.value = result.data[2];
    studentInit();
    teacherInit();
    userInit();
  }
}
onMounted(()=>{
  checkStudentNum();
})
</script>
<style lang="less">
.main{
  display: flex;
  justify-content: space-between;
  .card{
    width: 600px;
    height: 300px;
    margin: 60px 10px 0 10px;
    border-radius: 10px;
    box-shadow: 2px 5px 20px #ccc;
    .line{
      width: 96%;
      height: 1px;
      margin: 0 auto;
      background-color: #ccc;
    }
    .title{
      width: 100%;
      height: 40px;
      padding: 10px;
      font-size: 18px;
      color: #333;
      position: relative;
      .more{
        font-size: 14px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
      }
      .more:hover{
        color: #176eff;
      }
    }
    .content{
      width: 100%;
      height: 250px;
      padding: 10px;
      overflow: hidden;
      .info{
        font-size: 20px;
        line-height: 40px;
        text-align: center;
      }
      .circle{
        margin-top: 9px;
        width: 5px;
        height: 5px;
        background-color: red;
        border-radius: 50%;
      }
      .message{
        width: 470px;
        height: 100%;
        margin-left: 30px;
      }
      .tips{
        display: flex;
        margin: 15px 0;
        cursor: pointer;
        .app{
          width: 200px;
          height: 100%;
          margin-left: 30px;
        }
        .people{
          color: #b2b2b2;
          width: 200px;
          height: 100%;
        }
        .time{
          color: #b2b2b2;
          flex: 1;
          height: 100%;
        }
      }
      .tips:hover {
        .app, .message{
          color: #0048cd;
        }
      }
      .avatar{
        width: 100%;
        height: 100px;
        text-align: center;
      }
      .avatar img{
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
